.advice-summary {
  @extend %flex-column;

  color: $c-font-page;
  font-size: 0.9em;
  line-height: 1.15em;
  margin-top: 1em;

  &__side > div {
    display: flex;
    i,
    strong {
      flex: 0 1 4ch;
      text-align: center;
    }
    &.symbol {
      cursor: pointer;
      &:hover {
        color: $c-link;
      }
    }
  }

  .color-icon::before {
    vertical-align: text-bottom;
  }

  .button {
    margin: 0.6em 0;
  }

  @include breakpoint($mq-col1) {
    flex-flow: row wrap;
    justify-content: center;
    padding-bottom: $block-gap;
    border-bottom: $border;
    margin: 0;

    &__side {
      flex: 0 0 calc(50% - #{$block-gap});
      margin-left: $block-gap;
    }

    > a {
      order: 1;
    }
  }
}
